<template>
  <SysDialog draggable :title="dialog.title" :showFooter="dialog.showFooter" :visible="dialog.visible"
    :width="dialog.width" :height="dialog.height" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <!-- 内容组件 -->
      <el-table height="500" :data="AuditPageList" ref="refTable" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="name" min-width="200" show-overflow-tooltip label="阶段名称" align="center" />
        <el-table-column prop="fileName" min-width="200" show-overflow-tooltip label="文件名" align="center" />
        <el-table-column prop="versions" min-width="200" show-overflow-tooltip label="版本" align="center" />
        <el-table-column prop="createTime" min-width="200" show-overflow-tooltip label="创建时间" align="center">
          <template #default="scope">
            {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column prop="status" min-width="200" show-overflow-tooltip label="状态" align="center">
          <template #default="scope">
            {{ scope.row.status === 0 ? "锁定" : "正常" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="250"  align="center">
          <template #default="scope">
            <!-- 这个地方怎么实现状态保持 是怎么查询到这个数据的 -->
            <el-button type="primary" @click="addRect(scope.row)">选择数据</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </SysDialog>
  <!-- 异常单pdf关联文档 -->
  <addRelatedRect ref="RefAddReactedRect" @saveRect="saveRect" @closeData="closeData"></addRelatedRect>
  <!--  -->
</template>

<script setup lang='ts'>
import { ref ,nextTick} from 'vue'
import moment from "moment";
import addRelatedRect from './addRelatedRect.vue'
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import useInstance from '@/hooks/useInstance';
import {quoteStore} from '@/store/quoteData'
import addRelatedRectModel from '../modelTs/relatedRect'
const refTable = ref()
const store = quoteStore()
const { RefAddReactedRect, showaddReactRect } = addRelatedRectModel()
const emit = defineEmits(['saveRect','saveFile'])
let showRow = ref([]) as any
// 使用
const { dialog, onShow } = useDialog()
const { global, proxy } = useInstance();
// 父级数据
const props = defineProps({
  AuditPageList: {
    type: Array,
    default: () => []
  }
})
const onClose=()=>{
  console.log('关闭',showRow.value);
  
  emit('saveFile', showRow.value)
  dialog.visible=false
  nextTick(()=>{
    showRow.value=[]
  })
}
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 1) {
    return "warning-row";
  } else {
    return "success-row";
  }
}
// 如何保持状态 第二次弹开的时候
const backGround = (index) => {
  console.log(index,'index---------');

  if (index >= 0) {
    const table = refTable.value.$el
    const rows = table.querySelectorAll('.el-table__row');
    // 移除其他行的背景色
    rows.forEach(row => {
      row.style.backgroundColor = '';
    });
    // 设置指定行的背景色
    rows[index].style.backgroundColor = 'red';
    rows[index].style.color = '#000';
  } else {
    const table = refTable.value.$el
    const rows = table.querySelectorAll('.el-table__row');
    // 移除其他行的背景色
    rows.forEach(row => {
      row.style.backgroundColor = '';
      row.style.color = '#000';
    });

  }

}
const addRect = (row) => {
  if(row.status===0){
    global.$message({type:'warning',message:'文件处理中...'})
    return true
  }
  // 1 是否有数据 2 数据是否一样 3 store是否有数据
  if(showRow.value.length>0){
    if(row.id !== showRow.value[0].id){
      console.log('清空数据');
      store.clearData()
      showRow.value=[row]
    }
  }else{
    console.log('第一次点击');
    showRow.value=[row]
  }
// 数据保持怎么做
  showaddReactRect(row)
}
const saveRect = (rect) => {
  emit('saveRect', rect)
}
const closeData = (rect) => {
  // store 的数据判断最好
  console.log(store.hazardCites,'=======');
  if(store.hazardCites[0].imageId){
   const select = props.AuditPageList && props.AuditPageList.findIndex((item: any) => item.id === showRow.value[0].id)
    backGround(select)
  }else{
    backGround(-1)
    showRow.value = []
  }
}
const resetStyle=(list)=>{
  console.log('后续点击 修改');
   const select = props.AuditPageList && props.AuditPageList.findIndex((item: any) => item.id === list[0].id)
    showRow.value = props.AuditPageList && props.AuditPageList.filter((item: any) => item.id === list[0].id)
    backGround(select)
}
// 保存
const confirm = () => { }
const show = (type: string, row?: any) => {
  dialog.title = '关联文件'
  dialog.showFooter = false
  dialog.width = 1250
  dialog.height = 500
  onShow()
}
defineExpose({
  show,resetStyle
})
</script>
<style scoped lang='scss'>
:deep(.selected-row) {
  background-color: red !important;
  /* 设置行的背景颜色为黄色 */
  color: #fff;
  /* 可以根据需要定义其他样式 */
}
</style>